
<template>
  <div id="orderD">
    <div class="top">
      <div class="one">
        <p>
          订单号：
          <span>{{detail.orderId}}</span>
          <span>{{detail.isRefund?'已退款':returnState(detail.status)}}</span>
        </p>
        <p>
          下单时间：
          <span>{{detail.time}}</span>
          <span></span>
        </p>
      </div>
      <div class="two">
        <img :src="detail.img" alt>
        <div class="detail">
          <p>{{detail.title}}</p>
          <span>{{"￥"+detail.money}}</span>
          <i>x{{detail.number}}</i>
        </div>
      </div>
      <div v-if="detail.memo" class="memo-wrap box">
        <div class="title">支付卡券：</div>{{detail.memo}}
      </div>
      <div v-if="detail.orderType=='real'" class="memo-wrap box">
        <div class="title">运费：</div>{{detail.freight?detail.freight:'包邮'}}
      </div>
      <div v-if=" detail.orderType =='real'" class="three">
        <p>
          联系人：
          <span>{{detail.name}}</span>
        </p>
        <p>
          联系电话：
          <span>{{detail.phone}}</span>
        </p>
        <p>
          收货地址：
          <span>{{detail.address}}</span>
        </p>
      </div>
      <div class="three" v-if="detail.orderType!='third' && detail.orderType!='virtual'">
        <p v-if="detail.deliveryDay">
          配送时间：
          <span>{{detail.deliveryDay}}</span>
        </p>
        <p v-if="!detail.deliveryDay">
          配送日期：
          <span>{{detail.deliveryTime?detail.deliveryTime.split(' ')[0]:''}}</span>
        </p>
        <p v-if="!detail.deliveryDay">
          配送时间：
          <span>{{detail.deliveryTime?detail.deliveryTime.split(' ')[1]:''}}</span>
        </p>
      </div>
      <!-- 如购买的商品是 第三方电子券，则只显示 该卡券的链接、有效期、兑换码（待付款状态为空） -->
      <div class="four" 
        v-if="detail.esThirdCouponDetailDTO.length>0 &&type=='pay'">
        <div class="four-list" v-if="item.show" v-for="(item, index) in detail.esThirdCouponDetailDTO" :key='index'>
          <p>
            链接：
            <span>
              <!-- <a :href="detail.url" target="_Blank">{{detail.url.indexOf('无')>-1?'':detail.url}}</a>
              {{detail.url.indexOf('无')>-1?'暂无链接':''}} -->
              <a :href="item.url" target="_Blank">{{item.url.indexOf('无')>-1?'':item.url}}</a>
              {{item.url.indexOf('无')>-1?'暂无链接':''}}
            </span>
          </p>
          <p>
            有效期：
            <span>{{item.validDate}}</span>
          </p>
          <p>
            兑换码：
            <span>{{item.redeemcode}}</span>
          </p>
          <div @click="confrimBtn(item)" v-if="item.isUse == 'n'" class="btn-use">标记使用</div>
          <div v-if="item.isUse == 'y'" class="btn-state">已使用</div>
        </div>
      </div>
      <!-- 如购买的商品是 自营电子券，则只显示兑换二维码 -->
      <div class="four" v-if="detail.virtualCardUseRecordDTO.length>0 &&type=='pay'">
        <div class="virtualBox" v-for="(item, index) in detail.virtualCardUseRecordDTO" :key='index'>
          <img :src="item.qrcode" alt="">
          <div class='virtual'>
            <span>{{item.virtualcode}}</span>
          </div>
          <div class='virtual'>
            <span>有效期：{{item.virtualTime}}</span>
          </div>
        </div>
      </div>
      <div v-if="detail.dhlMsg" class="wuliu-wrap">
        <div class="wuliu-title">物流详情</div>
        <div class="wuliu-content">
          {{detail.dhlMsg}}
        </div>
      </div>
    </div>
    <div class="bottom" v-if="type=='wait'">
      <a href="javascript:;" @click="payNow">立即支付</a>
      <a href="javascript:;" @click="payCancel">取消支付</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "orderD",
  data() {
    return {
      type: '',
      detail: {
        orderId: "",
        type: "",
        time: "",
        name: "",
        number: "",
        phone: "",
        address: "",
        img: "",
        title: "",
        money: "",
        id: "",
        url: "",
        validDate: "",
        qrcode: "",
        virtualCardUseRecordDTO:[],
        esThirdCouponDetailDTO:[],
        serviceStatus:''
      },
      statusArr:[
        {
          name:'已完成',
          value:'finish'
        },
        {
          name:'已完成',
          value:'use'
        },
        {
          name:'待使用',
          value:'notuse'
        },
        {
          name:'已过期',
          value:'expire'
        },
        {
          name:'已支付',
          value:'pay'
        },
        {
          name:'待支付',
          value:'wait'
        },
        {
          name:'已取消',
          value:'cancel'
        },
      ],
    };
  },
  mounted() {
    this.configSet()
    this.getD();
  },
  created() {},
  methods: {
    configSet(){
      var pageUrl = window.location.href
      let url = `${this.$CONSTANT.WX.indexJsRequire}?url=${pageUrl}`;
      this.$common.post(url, {}, res => {
          if (res.status == 200) {
            let data = res.data.bussData;
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.appId, // 必填，公众号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature, // 必填，签名
                jsApiList: [
                        "checkJsApi", //判断当前客户端版本是否支持指定JS接口
                        "previewImage",
                        "onMenuShareTimeline", //分享到朋友圈
                        "onMenuShareAppMessage", //分享给朋友
                        "openLocation",
                        "getLocation",
                        "scanQRCode",
                        "chooseWXPay"
                    ] // 必填，需要使用的JS接口列表
            });
          } else {
            this.$vux.toast.show({
              text: res.msg,
              type: "warn",
              width: "auto"
            });
          }
        });
    },
    returnState(state){
      let str;
      this.statusArr.map(item=>{
        if(item.value == state){
          str = item.name
        }
      })
      return str||state
    },
    confrimBtn(v,index){
      var that = this
      this.$vux.confirm.show({
        title: '提示',
        content: '确认标记该电子券为已使用吗',
        onShow () {
          console.log('plugin show')
        },
        onHide () {
          console.log('plugin hide')
        },
        onCancel () {
          console.log('plugin cancel')
        },
        onConfirm () {
          console.log('plugin confirm')
          let url =
            that.$CONSTANT.COUPON.updateMyCoupon +
            "?sessionId=" +
            that.$common.getCookie("sessionId");
          let param = {
            id: v.id,
            status:'y',
            type:'third'
          };
          that.$vux.loading.show({
            text: 'Loading'
          })
          setTimeout(() => {
            that.$common.post(url, param, res => {
              that.$vux.loading.hide()
              if (res.status == 200) {
                that.$vux.toast.show({
                  text: '使用成功',
                  type: "success",
                  width: 'auto'
                });
                that.getD();
              } else {
                that.$vux.toast.show({
                  text: res.msg,
                  type: "warn",
                  width: 'auto'
                });
              }
            });
          }, 1000);
        }
      })
    },
    getD() {
      let url =
        this.$CONSTANT.ORDER.findEsPayOrderById +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        id: this.$route.query.id
      };
      // this.$vux.loading.show({
      //   text: "Loading"
      // });
      this.$common.post(url, param, res => {
        setTimeout(() => {
          this.$vux.loading.hide();
        }, 500);
        if (res.status == 200) {
          var bussData = res.data.bussData,memo='';
          if(bussData.couponDTOS&&bussData.couponDTOS.length){
            let arr = []
            bussData.couponDTOS.map(item=>{
              arr.push(item.couponCode.substr(-4))
            })
            memo = arr.join(',')
          }
          this.detail = {
            orderType: bussData.orderType,
            orderId: bussData.orderId,
            type: bussData.status == "pay" ? "已完成" : "待付款",
            serviceStatus:bussData.serviceStatus,
            time: bussData.gmtCreated,
            name: bussData.trueName,
            phone: bussData.mobile,
            status: bussData.status,
            isRefund:bussData.isRefund,
            address: bussData.address,
            deliveryDate:bussData.sendTime?bussData.sendTime.substr(0,10):'',
            deliveryDay:bussData.deliveryDay,
            deliveryTime:bussData.deliveryTime,
            dhlMsg:bussData.dhlMsg,
            freight:bussData.freight,
            img:
              bussData.esPayOrderDetailDTO[0].photos.length > 0
                ? bussData.esPayOrderDetailDTO[0].photos[0].fileUrl
                : "",
            title: bussData.esPayOrderDetailDTO[0].goodsName,
            number: bussData.esPayOrderDetailDTO[0].nums,
            money: bussData.totalPrice,
            id: bussData.id,
            memo:memo,
            esThirdCouponDetailDTO:bussData.esPayOrderDetailDTO[0].esThirdCouponDetailDTO?
            bussData.esPayOrderDetailDTO[0].esThirdCouponDetailDTO.map(item=>{
              return {
                url: item?item.url:'',
                validDate: item&&item.validTime?item.validTime.split(' ')[0]:'', 
                redeemcode: item?item.couponPsw:'',
                id:item?item.id:'',
                isUse:item?item.isUse:'',
                show:item?true:false
              }
            }):[],

            virtualCardUseRecordDTO:bussData.esPayOrderDetailDTO[0].virtualCardUseRecordDTO?
            bussData.esPayOrderDetailDTO[0].virtualCardUseRecordDTO.map(item=>{
              return {
                qrcode: item.qrCodePhoto[0].fileUrl,
                virtualTime: item.validTime,
                virtualcode: item.goodsCode,
              }
            }):[],
          };
          if(this.detail.url){
            if(this.detail.url.indexOf('http')==-1){
              this.detail.url = 'http://'+this.detail.url
            }
          }
          console.log(this.detail)
          this.type = bussData.status
          if(bussData.serviceStatus=='finish'){
            this.serviceStatus = '已完成'
          }else if(bussData.serviceStatus=='use'){
            this.serviceStatus = '已使用'
          }else if(bussData.serviceStatus=='notuse'){
            this.serviceStatus = '待使用'
          }else if(bussData.serviceStatus=='expire'){
            this.serviceStatus = '已过期'
          }
          // "serviceStatus": "订单状态，finish为已完成，used已使用，notuse未使用，expire已过期",
        } else {
          this.$vux.toast.show({
            text: res.msg,
            type: "warn",
            width: "auto"
          });
        }
      });
    },
    payNow() {
      let url =
        this.$CONSTANT.PAY.repay +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        orderId: this.detail.orderId
      };
      this.$vux.loading.show({
        text: "正在重新支付"
      });
      this.$common.post(url, param, res => {
        setTimeout(() => {
          this.$vux.loading.hide();
        }, 800);
        if (res.status == 200) {
          var bussData = res.data.bussData;
          setTimeout(() => {
            this.wxpayf(bussData)
          }, 800);
          this.$vux.toast.show({
            text: '正在请求微信支付',
            type: "",
            width: "auto"
          });
        } else {
          this.$vux.toast.show({
            text: res.msg,
            type: "warn",
            width: "auto"
          });
        }
      });
    },
    wxpayf(bussData) {
      var that = this
      wx.chooseWXPay({
        timestamp: bussData.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
        nonceStr: bussData.noncestr, // 支付签名随机串，不长于 32 位
        package: bussData.packageDesc, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
        signType: bussData.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
        paySign: bussData.sign, // 支付签名
        success: function(res) {
          // 支付成功后的回调函数
          console.log('success')
          that.$vux.toast.show({
            text: '支付成功',
            type: "",
            width: "auto"
          });
          that.getD()
        },
        cancel: function (res) {
          console.log('cancel')
          that.$vux.toast.show({
            text: '用户取消支付',
            type: "cencel",
            width: "auto"
          });
        },
        // 支付失败回调函数
        fail: function (res) {
          console.log('fail')
          that.$vux.toast.show({
            text: '支付失败',
            type: "warn",
            width: "auto"
          });
        }
      });
    },
    payCancelPrimary() {
      let url =
        this.$CONSTANT.PAY.cancelOrder +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        orderId: this.detail.orderId
      };
      this.$vux.loading.show({
        text: "正在取消订单"
      });
      this.$common.post(url, param, res => {
        setTimeout(() => {
          this.$vux.loading.hide();
        }, 800);
        if (res.status == 200) {
          var bussData = res.data.bussData;
          
          this.$vux.toast.show({
            text: res.msg,
            type: "",
            width: "auto"
          });
          setTimeout(() => {
            this.$router.back()
          }, 800);
        } else {
          this.$vux.toast.show({
            text: res.msg,
            type: "warn",
            width: "auto"
          });
        }
      });
    },
    payCancel() {
      var that = this;
      this.$vux.confirm.show({
        title: "提示",
        content: "确定取消吗？",
        onShow() {
          console.log("plugin show");
        },
        onHide() {
          console.log("plugin hide");
        },
        onCancel() {
          console.log("plugin cancel");
        },
        onConfirm() {
          console.log("plugin confirm");

          that.payCancelPrimary()
        }
      });
      
    }
  },
  components: {}
};
</script>

<style lang="less">
#orderD {
  .top {
    .one {
      background: #fff;
      padding: 0 11px 24px;
      p {
        color: #333;
        font-size: 15px;
        font-family: PingFang-SC-Bold;
        padding-top: 24px;
        font-weight: bold;
        span {
          &:last-child {
            float: right;
            font-size:14px;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(236,27,36,1);
          }
          &:first-child {
            font-size:15px;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(51,51,51,1);
          }
        }
        &:last-child {
          padding-top: 6px;
        }
      }
    }
    .two {
      background: #fff;
      margin-top: 8px;
      margin-bottom: 8px;
      padding: 22px 11px;
      position: relative;
      img {
        position: absolute;
        top: 22px;
        left: 11px;
        width: 26.6%;
        height: 94px;
        border: 1px solid transparent;
        border-radius: 3px;
        margin-right: 15px;
        object-fit: contain;
        display: inline-block;
      }
      .detail {
        display: inline-block;
        width: 65.1%;
        vertical-align: top;
        position: relative;
        height: 96px;
        margin-left: 33%;
        p {
          color: #333;
          font-size: 13px;
          font-family: PingFang-SC-Medium;
        }
        span {
          margin-top: 41px;
          color: #ea030b;
          font-size: 14px;
          font-family: PingFang-SC-Bold;font-weight: 600;
          position: absolute;
          bottom: 0;
          left: 0;
        }
        i{
          color: #999;
          font-size: 12px;
          font-family: PingFang-SC-Medium;
          position: absolute;
          bottom: 0;
          right: 0;
          font-style: initial;
        }
      }
    }
    .three,
    .four {
      
      margin-bottom: 8px;
      .four-list{
        position: relative;
        padding: 15px 11px;
        .btn-use{
          position: absolute;
          right: 10px;
          top: 40px;
          width:100px;
          height:30px;
          background:rgba(238,60,74,1);
          border-radius:15px;
          line-height: 30px;
          text-align: center;
          font-size:13px;
          font-family:PingFang SC;
          font-weight:bold;
          color:rgba(255,255,255,1);
        }
        .btn-state{
          position: absolute;
          right: 10px;
          top: 18px;
          font-size:14px;
          font-family:PingFang SC;
          font-weight:500;
          color:rgba(236,27,36,1);
        }
      }
      p {
        margin: 4px 0;
        font-size:15px;
          font-family:PingFang-SC-Bold;
          font-weight:bold;
          color:rgba(51,51,51,1);
        span {
          font-size:15px;
          font-family:PingFang SC;
          font-weight:500;
          color:rgba(51,51,51,1);
          word-break: break-all;
        }
      }
      img{
        display: block;
        width: 150px;
        height: 150px;
        margin: 10px auto;
        margin-top: 0;
        padding-top: 10px;
      }
      div.virtual{
        text-align: center;
        span{
          color: #666;
          font-family: PingFang-SC-Medium;
        }
      }
      >div{
        margin-bottom: 10px;
        padding: 0 11px;
        background: #fff;
      }
      div.virtualBox{
        margin-bottom: 0px;
      }
    }
    .three{
      background: #fff;
      padding: 22px 11px;
    }
  }
  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    a {
      display: inline-block;
      float: right;
      height: 38px;
      width: 110px;
      text-align: center;
      line-height: 38px;
      background: #ee3c4a;
      color: #fff;
      font-size: 13px;
      font-family: PingFang-SC-Bold;font-weight: 600;
      margin: 9px 10px 9px 0;
      border: 1px solid transparent;
      border-radius: 19px;
      &:last-child {
        background: #f3f3f3;
        color: #999;
      }
    }
  }
  .memo-wrap{
    height: 53.5px;
    align-items: center;  
    font-size:15px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(51,51,51,1);
    background-color: #fff;
    margin-bottom: 7.5px;
    padding-left: 10px;
    .title{
      
      font-family:PingFang SC;
      font-weight:bold;
      color:rgba(51,51,51,1);
    }
  }
  .wuliu-wrap{
    background-color: #fff;
    padding-left: 10px;
    padding-bottom: 30px;
    .wuliu-title{
      height: 25px;
      line-height: 25px;
      font-size:15px;
      font-family:PingFang SC;
      font-weight:bold;
      color:rgba(52,52,52,1);
      padding-top: 10px;
    }
    .wuliu-content{
      font-size:14px;
      font-family:PingFang SC;
      font-weight:500;
      color:rgba(51,51,51,1);
      margin-top: 5px;
    }
  }
}
</style>
